ArkUi

编写静态页面

常用组件(标签)

(1) Row 组件, 相当于行内块级元素

Row 示例 1

Row() {
  Row() {
    Text('1111')
  }.border({ width: 1, color: 'blue' })

  Row() {
    Text('1111')
  }.border({ width: 1, color: 'blue' })

  Row() {
    Text('1111')
  }.border({ width: 1, color: 'blue' })
}.border({ width: 2, color: 'red' }).padding(5)

设置子元素之间的间距

Row({ space: 20 }) {
  Button("第一按钮")
  Button("第二按钮")
  Button("第三按钮")
}

水平和垂直对齐方式

水平排列方式用justifyContent

FlexAlign.Start：子元素在水平方向首端对齐（默认值）
FlexAlign.Center：子元素在水平方向居中对齐
FlexAlign.End：子元素在水平方向尾部对齐
FlexAlign.SpaceBetween：子元素在水平方向均匀分配，第一个子元素与首端对齐、最后一个子元素与尾部对齐
FlexAlign.SpaceAround：子元素在水平方向相邻元素之间距离相同，第一个子元素到首端的距离和最后一个子元素到尾部的距离是相邻元素之间距离的一半
FlexAlign.SpaceEvenly：子元素在水平方向均匀分配，相邻元素之间的距离、第一个子元素与首端的距离和最后一个子元素到尾部的距离都完全一样

垂直对齐方式用alignItems

VerticalAlign.Top：子元素在垂直方向顶部对齐
VerticalAlign.Center：子元素在垂直方向居中对齐
VerticalAlign.Bottom：子元素在垂直方向底部对齐

 Row() {
      Button("第一按钮")
      Button("第二按钮")
      Button("第三按钮")
    }.width('100%').height(300)
    .border({width:2,color:'red'})
    // 水平对齐方式
    .justifyContent(FlexAlign.SpaceEvenly)
    // 垂直对齐齐方式
    .alignItems(VerticalAlign.Top)

(2) column 列

子元素纵向排列

 Column() {
      Row() {
        Text('1111')
      }.border({ width: 2, color: 'blue' })

      Row() {
        Text('1111')
          .borderColor('#ff9d5959')
      }.border({ width: 2, color: 'blue' })

      Row() {
        Text('1111')
      }.border({ width: 2, color: 'blue' })
    }.border({ width: 2, color: 'red' }) 
    .borderStyle(BorderStyle.Solid)
    .visibility(Visibility.Visible)

水平和垂直对齐方式

设置垂直对齐方式用justifyContent,取值跟Row 组件的水平对齐一样
设置水平对齐方式用alignItems, 取值有
- HorizontalAlign.Start：子元素在水平方向左对齐（默认值）
- HorizontalAlign.Center：子元素在水平方向居中对齐
- HorizontalAlign.End：子元素在水平方向右对齐

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text('1111')
      }.border({ width: 1, color: 'blue' })

      Row() {
        Text('1111')
      }.border({ width: 1, color: 'blue' })

      Row() {
        Text('1111')
      }.border({ width: 1, color: 'blue' })
    }.border({ width: 2, color: 'red' }).padding(5)
    .height(200).width(100)
    .justifyContent(FlexAlign.SpaceAround)
    .alignItems(HorizontalAlign.End)
  }
}

(3) Text组件, 文本组件

文本对齐方式

Column() {
  Text('hello world')
    .textAlign(TextAlign.Start)
    .border({ width: 1, color: 'blue' })
    .width('50%').margin({top: 20})
  Text('hello world')
    .textAlign(TextAlign.Center)
    .border({ width: 1, color: 'blue' })
    .width('50%').margin({top: 20})
  Text('hello world')
    .textAlign(TextAlign.End)
    .border({ width: 1, color: 'blue' })
    .width('50%').margin({top: 20})
}

文本溢出处理

   Column() {
      Text("鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙鸿蒙").textOverflow({
        overflow: TextOverflow.Ellipsis
      }).fontSize(30).fontColor(Color.Black).maxLines(2)
    }

(4) Image 组件, 图片组件

使用网络图片

找到 resources/module.json5 配置文件增加网络配置项如下, 申请网络权限

"requestPermissions": [
        {
          "name": "ohos.permission.INTERNET"
        }
      ]

Image('http://fresh.huruqing.cn/img/bg2.78d35cdc.png')
          .width('100%')

使用本地图片
图片放在 ets/img 文件夹里
```
Image('/img/girl.jpeg')
```

(5) Flex 弹性盒子

(1 方向设置

Flex({direction:FlexDirection.Row}){ 
  //1、第一个按钮
  Button('第一个按钮')
  Button('第二个按钮')
  Button('第三个按钮')
  Button('第四个按钮')
  Button('第五个按钮')
}

(2 换行设置

Flex({wrap:FlexWrap.Wrap}){
  //1、第一个按钮
  Button('第一个按钮')
  Button('第二个按钮')
  Button('第三个按钮')
  Button('第四个按钮')
  Button('第五个按钮')
}

(3 主轴对齐方式(默认水平对齐方式)

Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}){
  //1、第一个按钮
  Button('第一个按钮')
  Button('第二个按钮')
  Button('第三个按钮')
  Button('第四个按钮')
  Button('第五个按钮')
}

FlexAlign.Start：子元素在主轴方向首端对齐。（默认值）
FlexAlign.Center：子元素在主轴方向居中对齐。
FlexAlign.End：子元素在主轴方向尾部对齐。
FlexAlign.SpaceBetween：子元素在主轴方向均匀分配。
FlexAlign.SpaceAround：子元素在主轴方向均匀分配，相邻子元素之间距离相同。第一个子元素到主轴首端的距离和最后一个子元素到主轴尾部的距离是相邻元素之间距离的一半。
FlexAlign.SpaceEvenly：子元素在主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴首端的距离、最后一个子元素到主轴尾部的距离均相等。

(4 交叉轴的对齐方式(默认垂直对齐方式)

Flex({alignItems:ItemAlign.Auto}){ //使用 Flex 容器中默认配置。
Button("第一个按钮")
Button("第二个按钮")
Button("第三个按钮")
Button("第四个按钮")

(5 剩余空间分配

Flex(){
	Button("第一个按钮").flexGrow(1)
  Button("第二个按钮").flexGrow(2)
}

(6) 绝对定位

Row() {
  Text('1111').position({ x: 10, y: 10 })
}.border({ width: 1, color: 'blue' })
  .width(100).height(100)

(8) 相对布局组件

@Entry
@Component
struct Index {
  build() {
    RelativeContainer(){
      Row()
        .backgroundColor('green')
        .height(100)
        .width(100)
        .alignRules({
          bottom:{
            anchor:'__container__',
            align: VerticalAlign.Bottom
          },
          right:{
            anchor:'__container__',
            align: HorizontalAlign.End
          }
        })
    }.height('100%').width('100%').backgroundColor('gray')
  }
}

(9) 组件导入导出

方式一:

导出 export xxx

导入 import {xxx} from 'xxx'

// 子组件
@Component
export struct Hello{
  build() {
    Text('hello')
  }
}

// 父组件
import {Hello} from './Hello'
@Entry
@Component
struct Index {
  build() {
    Column(){
      Hello()
      Hello()
      Hello()
      Hello()
    }
  }
}

方式二:

导出 export default xxx

导入 import xxx from xxx

// 子组件
@Component
export default struct Hello{
  build() {
    Text('hello')
  }
}

// 父组件
import Hello from './Hello'
@Entry
@Component
struct Index {
  build() {
    Column(){
      Hello()
      Hello()
      Hello()
      Hello()
    }
  }
}

注意:

同一个文件中可以有多个export, 但只能存在一个 export default

// 子组件
@Component
export struct Hello1{
  build() {
    Text('hello1')
  }
}

@Component
export struct Hello2{
  build() {
    Text('hello2')
  }
}


@Component
export default struct Hello{
  build() {
    Text('hello')
  }
}

// 父组件
import Hello,{Hello1,Hello2} from './Hello'
@Entry
@Component
struct Index {
  build() {
    Column(){
      Hello1()
      Hello2()
      Hello()
    }
  }
}

(7) 轮播图

@Entry
@Component
struct Demo {
  swiper: SwiperController = new SwiperController();
  build() {
     Swiper(this.swiper){
       Row(){
         Text('1')
       }.width('100%').height(200)
         .justifyContent(FlexAlign.Center).backgroundColor('red')
       Row(){
         Text('2')
       }.width('100%').height(200)
         .justifyContent(FlexAlign.Center).backgroundColor('blue')
       Row(){
         Text('3')
       }.width('100%').height(200)
         .justifyContent(FlexAlign.Center).backgroundColor('green')
     }.border({width:2,color:'red'}).width('100%').height(200)
  }
}

(8) RelativeContainer 相对布局容器

@Entry
@Component
struct Index {
  build() {
    // 相对兄弟元素进行定位
    RelativeContainer() {

      Flex().height(100).width(100).backgroundColor('red')
        // 将父组件作为参照物进行定位
        .alignRules({
          bottom: {
            anchor: '__container__',
            align: VerticalAlign.Bottom
          },
          right: {
            anchor: '__container__',
            align: HorizontalAlign.End
          }
        })


      Row().height(200).width('100%').backgroundColor('blue').id('#aa')
      Flex().height(100).width(100).backgroundColor('green')// 将#aa组件作为参照物进行定位
        .alignRules({
          top: {
            anchor: '#aa',
            align: VerticalAlign.Bottom
          },
          right: {
            anchor: '#aa',
            align: HorizontalAlign.End
          }
        })

    }.height('100%').width('100%').backgroundColor('gray')
  }
}

(9) 样式和内容分离

https://blog.csdn.net/mqh_520/article/details/137570964

https://developer.aliyun.com/article/1625764

https://blog.csdn.net/2401_84194030/article/details/137967763

1. 使用@Styles定义组件内通用样式

组件特有样式不能在@Styles里进行定义

import Hello, { Hello1, Hello2 } from './Hello'

@Entry
@Component
struct Index {
  // 定义组件内通用样式
  @Styles
  redBorder() {
    .border({ width: 2, color: 'red' })
  }

  @Styles
  blueBorder() {
    .border({ width: 1, color: 'blue' })
  }

  @Styles
  ww() {
    .width('100%')
  }

  @Styles
  hh() {
    .height('100%')
  }

  @Styles tc(){
    // textAlign是 Text 组件特有样式, 不能在这里定义
    .textAlign(TextAlign.Center); 
  }

  build() {
    Column() {
      Text('哈哈哈').blueBorder()
    }.ww().hh().redBorder()
  }
}

2. 使用@Extend 组件公共特有样式

// 需要定义在组件外
@Extend(Text)
// 字体红色
function red() {
  .fontColor('red')
}

@Extend(Text)
// 可传参
function fSize(fontSize: number) {
  .fontSize(fontSize)
}


// 省略号表示
@Extend(Text)
function ellipsis() {
  .textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1)
}

@Entry
@Component
struct Index {
  @State fontSize:number = 50
  build() {
    Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
      .width('50%')
      .red()
      .fSize(50)
      .ellipsis()
      .border({ width: 1, color: 'red' })
  }
}

3. 定义全局样式

https://blog.csdn.net/superherowupan/article/details/143467505

// 封装公共margin
export class commMargin implements AttributeModifier<CommonAttribute> {
  num: number = 10;

  applyNormalAttribute(instance: CommonAttribute): void {
    instance.margin({ top: this.num })
  }

  constructor(num: number) {
    this.num = num;
  }
}

// 导入使用
import { commMargin } from './common/commStyle'
 Button('哈哈').attributeModifier(new commMargin(50))

// 设置一个组件的宽高和边框
 export class BoxStyle implements AttributeModifier<CommonAttribute> {
  height?: number = 0;
  width?: number|string = 0;
  bWidth?: number = 0;

  applyNormalAttribute(instance: CommonAttribute): void {
    instance
      .width(this.width)
      .height(this.height)
      .border({ width: this.bWidth, color: 'red' })
  }
  constructor(width:number|string,height:number,bWidth:number) {
    this.width = width;
    this.height = height;
    this.bWidth = bWidth;
  }
}


// 导入使用
import { BoxStyle } from './common/commStyle'

Row().attributeModifier(new BoxStyle('100%',50,10))

(1)准备工作

(3)ArkTs

ArkUi #

编写静态页面 #

(1) Row 组件, 相当于行内块级元素 #

Row 示例 1 #

设置子元素之间的间距 #

水平和垂直对齐方式 #

(2) column 列 #

子元素纵向排列 #

水平和垂直对齐方式 #

(3) Text组件, 文本组件 #

(4) Image 组件, 图片组件 #

使用网络图片 #

使用本地图片 #

(5) Flex 弹性盒子 #

(1 方向设置 #

(2 换行设置 #

(3 主轴对齐方式(默认水平对齐方式) #

(4 交叉轴的对齐方式(默认垂直对齐方式) #

(5 剩余空间分配 #

(6) 绝对定位 #

(8) 相对布局组件 #

(9) 组件导入导出 #

方式一: #

方式二: #

注意: #

(7) 轮播图 #

(8) RelativeContainer 相对布局容器 #

(9) 样式和内容分离 #

1. 使用@Styles定义组件内通用样式 #

2. 使用@Extend 组件公共特有样式 #

3. 定义全局样式 #

ArkUi

编写静态页面

(1) Row 组件, 相当于行内块级元素

Row 示例 1

设置子元素之间的间距

水平和垂直对齐方式

(2) column 列

子元素纵向排列

水平和垂直对齐方式

(3) Text组件, 文本组件

(4) Image 组件, 图片组件

使用网络图片

使用本地图片

(5) Flex 弹性盒子

(1 方向设置

(2 换行设置

(3 主轴对齐方式(默认水平对齐方式)

(4 交叉轴的对齐方式(默认垂直对齐方式)

(5 剩余空间分配

(6) 绝对定位

(8) 相对布局组件

(9) 组件导入导出

方式一:

方式二:

注意:

(7) 轮播图

(8) RelativeContainer 相对布局容器

(9) 样式和内容分离

1. 使用@Styles定义组件内通用样式

2. 使用@Extend 组件公共特有样式

3. 定义全局样式